<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { Icon } from '@iconify/vue';
import { collections as allIconCollections } from '@iconify-collections';

const collections = ref<Array<{ prefix: string, name: string, total?: number }>>([]);
const selectedCollection = ref<string>('');
const iconsInCollection = ref<string[]>([]);
const loading = ref(false);
const iconPreviewSize = 24; // Size for preview icons
const searchTerm = ref("")
let page = 1;
let size = 30;
onMounted(() => {
  try {
    // 从预处理的数据中读取所有图标集
    collections.value = allIconCollections.sort((a, b) => a.id.localeCompare(b.id));

    console.log('Loaded all icon collections:', collections.value.length);

  } catch (error) {
    console.error('Error initializing icon collections:', error);
  }
});

// 加载集合中的图标
const loadIconsInCollection = (prefix: string) => {
  selectedCollection.value = prefix;
  iconsInCollection.value = [];
  loading.value = true;

  try {
    // 对于每个集合，我们尝试加载一些常见的图标
    // 这比尝试加载整个集合更高效且适合浏览器环境
    iconsInCollection.value = collections.value.find(c => c.id === prefix)?.icons || [];
    console.log(`Loaded ${iconsInCollection.value.length} icons in ${prefix}`);
  } catch (error) {
    console.error(`Error loading icons for collection ${prefix}:`, error);
    iconsInCollection.value = [];
  } finally {
    loading.value = false;
  }
};

// 尝试加载集合中的一些示例图标
const loadSampleIcons = (prefix: string) => {
  const collection = collections.value.find(c => c.id === prefix);
  if (collection) {
    iconsInCollection.value = collection.icons.slice(0, 10); // 取前10个图标
  }

  console.log(`Found ${iconsInCollection.value.length} valid icons in ${prefix}`);
};

// 检查图标是否存在
const checkIconExists = (collection: string, icon: string): boolean => {
  try {
    return exists(`${collection}:${icon}`);
  } catch {
    return false;
  }
};
</script>
<template>
  <div class="p-4 overflow-auto">
    <h2 class="text-xl font-bold mb-4">Icon Collections</h2>

    <!-- Collection Search and Stats -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-2">
      <div class="text-sm text-gray-600">
        Total collections: {{ collections.length }}
      </div>
      <div class="relative w-full md:w-64">
        <input type="text" v-model="searchTerm" placeholder="Search collections..."
          class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />
      </div>
    </div>

    <!-- Collection Selection -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 mb-6">
      <div v-for="item in collections" :key="item.id"
        class="border p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
        :class="{ 'border-green-500 bg-green-50': selectedCollection === item.id }"
        @click="loadIconsInCollection(item.id)">
        <div class="flex items-center justify-between">
          <div class="font-medium">{{ item.id }}</div>
          <Icon v-if="selectedCollection === item.id" icon="ph:check" class="text-green-500" :width="16" :height="16" />
        </div>
        <div class="text-xs text-gray-600 mb-1">{{ item.name }}</div>
        <div class="text-xs text-blue-600">
          {{ item.total?.toLocaleString() }} icons
        </div>
      </div>
    </div>

    <!-- Icons Preview -->
    <div v-if="selectedCollection" class="mt-8">
      <h3 class="text-lg font-semibold mb-3">
        Icons in {{ selectedCollection }}
        <span v-if="loading" class="text-sm font-normal text-gray-500">- Loading...</span>
      </h3>

      <div v-if="iconsInCollection.length > 0" class="flex flex-wrap gap-3 p-3 bg-gray-50 rounded-lg">
        <template v-for="icon in iconsInCollection" :key="icon">
          <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:shadow-md transition-shadow">
            <Icon :icon="`${selectedCollection}:${icon}`" class="text-gray-700 icon-preview" :width="iconPreviewSize"
              :height="iconPreviewSize" />
            <div class="text-center">
              <div class="text-xs text-gray-500 font-mono truncate max-w-[100px]">
                {{ selectedCollection }}:{{ icon }}
              </div>
            </div>
          </div>
        </template>

      </div>

      <div v-else-if="!loading" class="p-4 bg-gray-50 rounded-lg text-gray-500 text-center">
        No icons found or failed to load icons for this collection.
      </div>
    </div>

    <!-- Usage Help -->
    <div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
      <h4 class="font-medium text-blue-800 mb-2">How to use these icons</h4>
      <pre class="text-sm text-gray-700 bg-white p-2 rounded overflow-x-auto">
    {{ `
    <Icon icon="${selectedCollection || 'collection'}:${iconsInCollection[0] || 'icon'}" />` }}
  </pre>
      <p class="text-xs text-gray-600 mt-2">Make sure you're using the Icon component from '@iconify/vue'</p>
    </div>
  </div>
</template>
<style lang="less" scoped>
.icon-preview {
  transition: transform 0.2s ease;
}

.icon-preview:hover {
  transform: scale(1.1);
}
</style>